<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    <head>
        <meta charset="utf-8">
        <title>捐赠-绿色生活-自然与环境</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="description" content="Greenlife - Nature & Environmental Non-Profit HTML5 Template">
        <meta name="author" content="BlueWindLab">
        <link rel="shortcut icon" href="images/favicon.png" />


        <!-- The styles -->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link href="css/bootstrap-social.css" rel="stylesheet" type="text/css" >
        <link href="css/icon-styles.css" rel="stylesheet" type="text/css" >
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" >
        <link href="css/animate.css" rel="stylesheet" type="text/css" >
        <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" >
        <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" >
        <link href="css/venobox.css" rel="stylesheet" type="text/css" >
        <link rel="stylesheet" href="css/styles.css" />

    <body> 

        <div id="preloader">
            <span class="margin-bottom"><img src="images/loader.gif" alt="" /></span>
        </div>

        <!--  HEADER -->

        <header class="main-header clearfix">

            <div class="top-bar">

                <div class="container">

                    <div class="row clearfix">

                        <div class="col-md-6 col-sm-12">

                            <span class="top-phone-no">
                                <i class="fa fa-phone-square"></i> 
                                +093-120-525-9162
                            </span>

                            <span class="top-email-info">
                                <i class="fa fa-paper-plane"></i>
                                <a href="#">info@example.com</a>
                            </span>

                        </div> <!-- end col-sm-6  -->

                        <div class="col-md-6 col-sm-12 text-right hidden-xs top-donation-btn-container">

                          <a href="#" title="Donate Now" class="btn top-donate-btn" >加入我们</a>

                        </div> <!-- end col-sm-6  -->

                    </div> <!-- end .row  -->

                </div> <!--  end .container -->

            </div> <!--  end .top-bar  -->
            
           <section class="header-wrapper navgiation-wrapper">
            
                <div class="navbar navbar-default">         
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="logo" href="indexs.jsp"><img alt="" src="images/logo.png"></a>
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="drop">
                                    <a href="indexs.jsp" title="Home Layout 01">首页</a>
                                    <ul class="drop-down">
                                    </ul>
                                </li>
                                <li class="drop"><a href="about-us.jsp">页面</a>
                                    <ul class="drop-down">
                                        <li><a href="about-us.jsp" title="About Us">关于我们</a></li>
                                        <li class="drop"><a href="gallery-1.jsp">陈列室</a>
                                        </li>
                                        <li><a href="donation.jsp" title="Donation">捐赠物</a></li> 
                                        </li>
                                    </ul>
                                </li>
                                
                                <li>
                                    <a href="causes.jsp">原因</a>
                                    <ul class="drop-down">
                                        <li><a href="causes.jsp">所有原因</a></li>
                                        <li><a href="cause-single.jsp">单一原因</a></li>
                                    </ul>
                                </li>
                                
                                <li>
                                    <a href="events.jsp">事件</a>
                                    <ul class="drop-down">
                                        <li><a href="events.jsp">所有事件</a></li>
                                        <li><a href="event-single.jsp">单一事件</a></li>
                                    </ul>
                                </li>
                               
                            </ul>
                        </div>
                    </div>
                </div>
                
            </section>


        </header> <!-- end main-header  -->
        <!--  PAGE HEADING -->

        <section class="page-header donation-header">

            <div class="container">

                <div class="row">

                    <div class="col-sm-12 text-center">


                        <h3>
                            志愿者
                        </h3>

                        <p class="page-breadcrumb">
                            <a href="#">首页</a> / 加入我们
                        </p>


                    </div>

                </div> <!-- end .row  -->

            </div> <!-- end .container  -->

        </section> <!-- end .page-header  -->
 
       <!--  MAIN CONTENT  -->
       
       <section class="section-content-block">
       
            <div class="container">
           
                    <div class="row">
    
                        <div class="col-sm-12">
                            
                            <div class="donation-form-wrapper">

                                <form action="#" id="from1" method="get" name="donation_form" class="donation_form " id="donation_form">   

                                    <div class="donation-form-info-2">
                                        <h4>志愿者信息</h4>
                                        <div class="form-group">
                                            <label for="first_name" class="col-sm-2 control-label">姓名: </label>
                                            <div class="col-md-6 col-sm-10">
                                                <input type="text" class="form-control" id="first_name" name="first_name" value=""/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="first_name" class="col-sm-2 control-label">密码: </label>
                                            <div class="col-md-6 col-sm-10">
                                                <input type="text" class="form-control" id="first_pass" name="first_pass" value=""/>
                                            </div>
                                        </div>
                                        <br>性别：
                                        <br>
                                        <input type="radio" value="男" id="amount_1" name="inlineRadioOptions" checked> 男
                                        <input type="radio" value="女" id="amount_1" name="inlineRadioOptions"> 女
                                        <div class="form-group">
                                            <label for="email" class="col-sm-2 control-label">Email: </label>
                                            <div class="col-md-6 col-sm-10">
                                                <input type="email" class="form-control" id="email" name="email" value=""/>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="address" class="col-sm-2 control-label">职业: </label>
                                            <div class="col-md-6 col-sm-10">
                                                <input type="text" class="form-control" id="userOccupation" name="userOccupation" value=""/>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="city" class="col-sm-2 control-label" id="cou" name="cou">国家: </label>
                                            <div class="col-md-6 col-sm-10">
                                                 <select id="city" name="country"><option selected="selected" value="中国">中国</option><option value="俄罗斯">俄罗斯</option><option value="美国">美国</option><option value="韩国">韩国</option><option value="日本">日本</option><option value="英国">英国</option><option value="德国">德国</option><option value="塞尔维亚">塞尔维亚</option></select>
                                            </div>
                                        </div>
      
                                    </div> <!-- end .donation-form-info-2  -->

                                    <div class="donation-form-info-2">
                                        <input type="button" id="donate_now" name="donate_now" value="加入我们" class="btn btn-danger btn-lg btn-submit-donation"/>
                                    </div> <!-- end .donation-form-info-4   -->    


                                </form>

                            </div> <!--  end .donation-form-wrapper -->
                                
                   
                        </div> <!--  end col-sm-12  -->
                   
                    </div> <!-- end row  -->
               
            </div> <!--  end container -->
       
      </section> <!-- end .main-content  -->
      
      <!-- CLIENT LOGO SECTION  -->

        <section class="section-content-block section-secondary-bg section-client-logo">

            <div class="container wow fadeInUp">
                
                <div class="row">

                    <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                        <h2 class="section-heading"><span>我们的</span> 捐赠者</h2>
                        <p class="section-subheading">
                            他们把全部牲畜交给开放的船队是痛苦的，他们会把土地留给雨水。
                        </p>
                    </div> <!-- end .col-sm-10  -->

                </div> <!--  end .row  -->

                <div class="row">

                    <div class="logo-items logo-layout-1 text-center">

                        <div class="logo">

                            <img src="images/logo_1.png" alt="" />

                        </div>

                        <div class="logo">

                            <img src="images/logo_2.png" alt="" />

                        </div>

                        <div class="logo">

                            <img src="images/logo_3.png" alt="" />

                        </div>

                        <div class="logo">

                            <img src="images/logo_4.png" alt="" />

                        </div>

                        <div class="logo">

                            <img src="images/logo_5.png" alt="" />

                        </div>


                    </div> <!-- end .testimonial-container  -->

                </div> <!-- end row  -->

            </div> <!-- end .container  -->

        </section> <!--  end .section-client-logo -->
       
       <!--  NEWSLETTER SECTION  -->

       
        <script src="js/jquery-3.7.1.js" ></script>
       <script src="js/jquery.min.js"></script>
       <script src="js/bootstrap.min.js"></script>
       <script src="js/wow.min.js"></script>
       <script src="js/jquery.backTop.min.js "></script>
       <script src="js/waypoints.min.js"></script>
       <script src="js/waypoints-sticky.min.js"></script>
       <script src="js/owl.carousel.min.js"></script>
       <script src="js/jquery.stellar.min.js"></script>
       <script src="js/jquery.counterup.min.js"></script>
       <script src="js/venobox.min.js"></script>
       <script src="js/custom-scripts.js"></script>
       
   </body>
<script>

$("#donate_now").bind("click",function(){
	const email = $("#email").val();
    const regex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
    var phoneNumber = $("#phone").val();
    var regexs = /^1[3-9]\d{9}$/;
    
		if( $("#first_name").val() === '' ||$("#email").val() === ''||$("#userOccupation").val() === ''||$("#city").val() === ''){
			alert("加入志愿者必须全部填写");
			return;
		  }else if(!regex.test(email)){	           
	            	alert("电子邮件地址无效");
	                return;
		  }else{
			  $ ("#from1").attr("action","GreenInserUserServlet")
			  $("#from1").submit();
		  }
});	 
</script>
</html>